<template>
   <div>
     <div>
       <div>
            <img :src="books.image" alt="" @click="goToDetail(books.id)">
       </div>
       <p>书名：{{books.name}}</p>
       <p>价格：{{books.price}}元</p>
       <button @click="clear(books.id)">不喜欢</button>
    </div>
    <div>
       
    </div>
   </div>
</template>

<script setup>
import {useRouter} from "vue-router"

const router = useRouter()

const  props=defineProps(["books"])

const  emit=defineEmits(["onclear"])
const clear=(id)=>{
    emit("onclear",id)
}
const  goToDetail=(id)=>{
        router.push({path:"/detail",query:{pid:id}})
}
</script>

<style scoped>

</style>